<template>
    <div class="shopping-cart-container">
        <div class="title">
            <h2>购物车</h2>
            <button class="batch-del" v-show="result.length" @click="batch_del">
                批量删除
            </button>
        </div>
        <van-checkbox-group v-model="result" ref="checkbox_group">
            <div v-for="(item, i) in goods_data" :key="item.id">
                <van-checkbox :name="item.id" />
                <van-swipe-cell>
                    <GoodsCard
                        :goods="item"
                        @change_count="handle_count(item, $event, i)"
                    />
                    <template #right>
                        <van-button
                            class="del-btn"
                            type="danger"
                            text="删除"
                            @click="del_one(item, i)"
                        />
                    </template>
                </van-swipe-cell>
            </div>
        </van-checkbox-group>
        <van-submit-bar
            :price="total_price * 100"
            button-text="提交订单"
            @submit="handle_submit"
        >
            <span class="check-all" @click="check_all">
                <van-checkbox :value="is_all_select" />
                全选
            </span>
        </van-submit-bar>
    </div>
</template>

<script>
import { Dialog } from "vant"
import GoodsCard from "@/components/GoodsCard"
import { get_goods } from "@/api"

export default {
    created() {
        const value = Object.keys(this.$store.state.shopping_cart).join(",")
        get_goods({ value }).then((resp) => {
            const data = resp.list.map((item) => ({
                ...item,
                count: this.$store.state.shopping_cart[item.id] || 0
            }))
            this.goods_data = data
        })
    },
    components: {
        GoodsCard
    },
    computed: {
        is_all_select() {
            const total_count = this.goods_data.length
            if (total_count === 0) {
                return false
            }
            return this.result.length === total_count
        },
        total_price() {
            return this.goods_data
                .filter((item) => this.result.includes(item.id))
                .reduce((prev, item) => prev + item.price * item.count, 0)
                .toFixed(2)
        }
    },
    data() {
        return {
            checked: false,
            goods_data: [],
            result: []
        }
    },
    methods: {
        handle_count(item, count, index) {
            item.count = count
            this.$store.commit("set_shopping_cart", item)
            if (count === 0) {
                this.goods_data.splice(index, 1)
            }
        },
        check_all() {
            if (this.is_all_select) {
                this.$refs.checkbox_group.toggleAll(false)
            } else {
                this.$refs.checkbox_group.toggleAll(true)
            }
        },
        del_one(item, index) {
            this.$store.commit("del_goods", [item.id])
            this.goods_data.splice(index, 1)
        },
        handle_submit() {
            if (this.result.length) {
                Dialog.alert({
                    message: `请付款 ￥${this.total_price}`,
                    title: "付款"
                })
            }
        },
        batch_del() {
            this.$store.commit("del_goods", this.result)
            this.goods_data = this.goods_data.filter(
                (item) => !this.result.includes(item.id)
            )
        }
    }
}
</script>

<style lang="less">
.shopping-cart-container {
    .title {
        h2 {
            text-align: center;
            font-weight: 500;
            margin: 10px 0;
        }
        .batch-del {
            color: red;
            border: none;
            background-color: #fff;
            position: fixed;
            right: 7px;
            font-size: 13px;
            top: 7px;
        }
    }
    .van-checkbox-group {
        margin-bottom: 100px;
        > div {
            display: flex;
            .van-checkbox {
                margin: 0 10px;
                flex: 0 0 auto;
            }
            .van-swipe-cell {
                width: 100%;
                .del-btn {
                    height: 100%;
                }
            }
        }
    }
    .check-all {
        display: flex;
        align-items: center;
        font-size: 16px;
        .van-checkbox {
            margin-right: 10px;
        }
    }
    .van-submit-bar {
        bottom: 50px;
    }
}
</style>
